<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加院线</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/detail.css">
    <style>
        .imgs{
        margin-left: 110px;
        margin-top: 10px;
        position: relative;
        width:150px;
        height:150px;
        display: none;
    }
    .imgs i{
        position: absolute;
        right: 2px;
        top: 2px;
        color:#fff;
        z-index:1;
        cursor: pointer;
    }
    .imgs::after{
        content: "";
        position:absolute;
        height:20px;
        background:rgba(0,0,0,.5);
        top:0;
        left:0;
        width:100%;
        border-radius: 5px 5px 0 0;

    }
    .imgs img{
        width:100%;
        height:100%;
        display: block;
        object-fit: contain;
        border-radius:5px;
        border: 1px solid gray;
        box-sizing: border-box;
    }
    </style>
</head>

<body class="layui-layout-body">

    <div class="layui-body inner-body">

        <!-- 内容主体区域 -->
        <div style="padding: 15px">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>
                    <button data-target="../../pages/cinemaManagement.html" class="layui-btn layui-btn-sm">
                        <a href="../../pages/cinemaManagement.html">返回</a>
                    </button>
                    添加院线
                </legend>
            </fieldset>

            <form class="layui-form" action="" onsubmit="return false">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">院线名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入院线名称" lay-verify="required" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">院线地址</label>
                        <div class="layui-input-inline" style="width:500px;">
                            <input type="text" name="addr" lay-verify="required" placeholder="请输入院线地址" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">海报图</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" id="btnPoster">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <div class="imgs" style="margin-left:0px">
                                    <img src="" alt="">
                                    <i class="layui-icon layui-icon-close"></i>
                                </div>
                                <div class="img-input" style="display:none">
                                    <input type="text" id="txtimg" name="image">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tel" placeholder="请输入联系电话" lay-verify="required" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="cinema-addCinema">添加影院</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <script src="../../layui/jquery-1.12.4.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        //JavaScript代码区域
        $(".imgs i").click(function () {//关闭选中的图片
            $(".imgs img").prop("scr", "");
            $("#txtimg").val("");//清空隐藏框的值
            $(".imgs ").hide();
        });

        layui.use(['form', "layer", 'upload'], function () {
            let upload = layui.upload;
            let form = layui.form;
            //执行实例
            var uploadInst = upload.render({
                elem: '#btnPoster', //绑定元素
                url: '/api/upload/', //上传接口
                field: "imgfile",
                acceptMime: "image/*",//控制上传文件--图片
                size: 500,//文件大小不能超过500kb
                drag: true,//拖拽上传
                done: function (res) {
                    //上传完毕回调

                    $(".imgs img").prop("src", res.data[0]);
                    $("#txtimg").val(res.data[0]);
                    $(".imgs").show();
                    console.log(res);
                },
                error: function () {
                    //请求异常回调
                    console.log("错误")
                }
            });
            //提交
            form.on("submit(cinema-addCinema)", async function (data) {
                delete data.field.imgfile;

                if (!data.field.image) {
                    layer.msg("请上传院线图片", {
                        icon: 2,
                    });
                    return;
                }
                console.log(data.field);
                await $.post("/api/Cinema", data.field);
                layer.msg('添加影院成功', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "../../pages/cinemaManagement.html";
                });
            });
        });
    </script>
</body>

</html>